import userEvent from '@testing-library/user-event'
import React,{useEffect,useState} from 'react'
import { Button, Space, Toast } from 'antd-mobile'
import styles from './index.css'
import './index.css'
//
import axios from 'axios'
//
import { Swiper, SwiperSlide } from 'swiper/react';
// Import Swiper styles
import 'swiper/css';
export default function Index() {
  const [colors, setColor] = useState([])
  const [swiperList,setswiperList] = useState([0,1,2,3,4,5,6])
  useEffect(()=>{
    setColor(
      ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']
    )
  },[swiperList])
  useEffect(()=>{
    axios.get('/home/swiper').then(res=>{
      console.log(res)
      let {data} = res
      console.log(data)
      setswiperList(data.body)
      console.log(swiperList)
    })
  },[])
  return (
    <div>
      <div className='new swiperFather'>
            <Swiper
            spaceBetween={50}
            slidesPerView={3}
            onSlideChange={() => console.log('slide change')}
            onSwiper={(swiper) => console.log(swiper)}
          >
            {
              swiperList.map((item,index)=>{
                return <SwiperSlide key={index}>{item}</SwiperSlide>
              })
            }
          </Swiper>
            </div>    
    </div>
  )
}
